<template>
  <div
    id="detail"
    :class="{
      h5: this.$store.state.webType === 'h5',
      en: this.$store.state.lang === 'EN',
    }"
  >
    <el-row :span="24" class="page">
      <!-- 面包屑 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">{{
            $t('home')
          }}
        </el-breadcrumb-item>
        <!--        <el-breadcrumb-item>{{ $t('sections') }}</el-breadcrumb-item>-->
        <el-breadcrumb-item :to="{ path: detail.path }">{{
            detail.lmName
          }}
        </el-breadcrumb-item>
      </el-breadcrumb>
      <el-row :span="24" class="page-content">
        <el-row :span="24" class="art-row">
          <div class="art-col">
            <div class="detail-title">{{ detail.title }}</div>
            <div class="detail-info">
              <div class="info-item" v-if="detail.author">
                {{ $t('author') }}{{ detail.author }}
              </div>
              <div class="info-item" v-if="detail.ly">
                {{ $t('source') }}{{ detail.ly }}
              </div>
              <div class="info-item">
                {{ $t('release') }}{{ detail.createTime }}
              </div>
            </div>
            <div class="detail-html" v-html="detail.detailHtml"></div>
            <!--            <el-image-->
            <!--              v-else-->
            <!--              style="width: 100%;margin-top: 30px; cursor: pointer"-->
            <!--              :src="detail.imgUrl"-->
            <!--              :preview-src-list="[detail.imgUrl]">-->
            <!--            </el-image>-->
            <goTop></goTop>
          </div>
          <!-- 右侧{{$t('latest')}} 热点文章 -->
          <div class="row-right" v-if="this.$store.state.webType !== 'h5'">
            <!-- {{$t('latest')}} -->
            <hot-article></hot-article>
            <new-book></new-book>
          </div>
        </el-row>
      </el-row>
    </el-row>
  </div>
</template>

<script>
import goTop from '../components/goTop';
import NewBook from '@/components/NewBook';
import HotArticle from '@/components/HotArticle';

export default {
  name: 'ArticleDetail',
  components: {
    goTop,
    HotArticle,
    NewBook,
  },
  data() {
    return {
      currentView: 'img',
      bannerData: [],
      bookData: {},
      articleData: [],
      // 文章列表
      artData: [],
      // 文章总数量
      listTotal: 0,
      maxPage: 1,
      // 文章列表请求信息
      listQuery: {
        id: '',
      },
      detail: {},
    };
  },
  watch: {
    '$route.query.id'(value, oldValue) {
      // 第一个参数为新值，第二个参数为旧值，不能调换顺序
      // console.log(`新值：${value}`);
      // console.log(`旧值：${oldValue}`);
      this.listQuery.id = value;
      this.getDetail();
    },
  },
  mounted() {
    this.listQuery.id = this.$route.query.id;
    this.getDetail();
    //  console.log(this.$store.state.lang);
  },
  methods: {
    getDetail() {
      this.$get(this.$api + '/cms/web/getArticleDetail', this.listQuery)
        .then(
          (res) => {
            this.detail = res.data;
            this.$nextTick(() => {
              let fontList = document.querySelectorAll(`font`);
              let pList = document.querySelectorAll(`p`);
              // console.log(fontList);
              pList.forEach((p) => {
                if (p.innerHTML == '') {
                  //  console.log(p.innerHTML);
                  p.style.height = '20px';
                }
              });
              fontList.forEach((item) => {
                if (item.parentNode.align === 'center') {
                  // console.log(item.parentNode.align);
                  item.style.textAlign = 'center';
                  item.style.display = 'block';
                  item.style.textIndent = '0';
                }
              });
            });
            return;
            this.$nextTick(() => {
              // var ul = document.querySelector(`ul`) ;
              // var aTop = window.getComputedStyle(ul,"after").top;
              let page = document.querySelector(`.page`);
              let pageAfter = window.getComputedStyle(page, 'after');
              let style = document.createElement('style');

              switch (this.detail.path) {
                case '/exclusive':
                  style.innerHTML = `#app #detail .page::after{background-image: url('${require('../assets/images/djfb-bg.jpg')}');}`;
                  break;
                case '/imgnumsay':
                  style.innerHTML = `#app #detail .page::after{background-image: url('${require('../assets/images/say-bg.png')}');}`;
                  break;
                case '/china':
                  style.innerHTML = `#app #detail .page::after{background-image: url('${require('../assets/images/ddzg-bg.jpg')}');}`;
                  break;
                case '/story':
                  style.innerHTML = `#app #detail .page::after{background-image: url('${require('../assets/images/rwgs-bg.png')}');}`;
                  break;
                case '/beautiful':
                  style.innerHTML = `#app #detail .page::after{background-image: url('${require('../assets/images/zhzm-bg.jpg')}');}`;
                  break;
                case '/wuzhou':
                  style.innerHTML = `#app #detail .page::after{background-image: url('${require('../assets/images/wzyy-bg.jpg')}');}`;
                  break;
              }
              document.head.appendChild(style);
              // console.log(pageAfter.backgroundImage);
              let list = document
                .querySelector('.detail-html')
                .querySelectorAll('img');
              // console.log(list);
              list.forEach((img) => {
                let parent = img.parentNode;
                let nextEle = parent.nextElementSibling;
                if (parent.querySelector('p')) {
                  parent.querySelector('p').style.color = '#000080';
                } else if (nextEle.querySelector('p')) {
                  nextEle.querySelector('p').style.color = '#000080';
                } else if (img.nextElementSibling) {
                  img.nextElementSibling.style.color = '#000080';
                } else if (nextEle) {
                  nextEle.style.color = '#000080';
                }
                // console.log(parent, nextSbiling);
              });
            });
          }
        );
    },
    viewTypeChange(type) {
      this.currentView = type;
    },
  },
};
</script>
<style>
body {
  background: #fff;
}

.en .detail-html p,
.en .detail-html section {
  line-height: 32px !important;
}

#detail .detail-html {
  text-align: justify;
}

.detail-html p,
.detail-html section {
  text-indent: 2em;

  text-justify: distribute-all-lines; /* 这行必加，兼容ie浏览器 */
  /* text-align-last: justify; */
}

.en .detail-html p,
.en .detail-html section {
  text-indent: 0;
}

.detail-html font {
  text-indent: 0 !important;
  /*display: block;*/
}

/*.detail-html strong font*/
</style>
<style lang="scss" scoped>
.en #detail .art-col .detail-html {
  padding: 0 fw(100vw, pc);
}

.en #detail .art-col .detail-info {
  padding: fh(12vh, pc) fw(100vw, pc);
}

#detail {
  position: relative;
  width: 100%;

  > .page {
    padding: fh(130vh, pc) fw(80vw, pc) 0 fw(80vw, pc);
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.13) 0%,
        #ffffff 100%
    );
    // height: fh(930vh, pc);
    &::after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
      // background: url("../assets/images/djfb-bg.jpg") no-repeat;
      background-size: 100% auto;
      background-position: center 0;
    }

    ::v-deep .el-breadcrumb {
      display: block !important;
      // margin-left: fw(-40vw, pc);
      .el-breadcrumb__inner {
        font-weight: bold;
        color: rgba(104, 106, 103, 0.4) !important;
        font-size: fh(18vh, pc);

        &.is-link {
          cursor: pointer;
        }
      }

      .el-breadcrumb__item:nth-last-child(1) .el-breadcrumb__inner {
        color: #686a67 !important;
        font-weight: bold;
      }

      .el-icon-arrow-right:before {
        color: rgba(104, 106, 103, 0.4) !important;
        font-weight: bold;
      }
    }
  }

  .page-content {
    padding: fh(20vh, pc) fw(0vw, pc) fh(40vh, pc) fw(0vw, pc);
    position: relative;
    // margin-top: fh(-800vh, pc);
  }

  .art-row {
    display: flex;
    // margin-top: fh(40vh, pc);
    width: 100%;

    .book-content {
      background-color: $fh90;
      padding-bottom: fh(40vh, pc);

      .book-btn {
        display: flex;
        width: 100%;
        align-items: flex-end;
        justify-content: center;

        img {
          width: fw(180vw, pc);

          &:hover {
            cursor: pointer;
            opacity: 0.7;
          }
        }
      }

      .book-row {
        display: flex;
        width: 100%;
        padding: fh(46vh, pc) fw(20vw, pc);
        color: $sh;

        img.book-img {
          width: fw(280vw, pc);
        }

        .book-text {
          padding-left: fw(10vw, pc);

          .view-label {
            color: $zh;
            position: relative;
            display: inline-block;
            font-size: fh(24vh, pc);
            font-weight: 800;
            margin-top: fh(20vh, pc);
            margin-bottom: fh(60vh, pc);

            &::after {
              content: "";
              position: absolute;
              bottom: fh(-16vh, pc);
              right: fw(-12vw, pc);
              width: fw(30vw, pc);
              height: fh(18vh, pc);
              border-right: fw(6vw, pc) solid hsla(14, 74%, 37%, 0.2);
              border-bottom: fw(8vw, pc) solid hsla(14, 74%, 37%, 0.2);
            }
          }

          .text-item {
            padding-bottom: fh(30vh, pc);

            .item-title {
              color: $sh;
              font-size: fh(18vh, pc);
              font-weight: bold;
              padding-bottom: fh(20vh, pc);
            }

            .item-content {
              font-size: fh(16vh, pc);
              line-height: fh(26vh, pc);
            }
          }
        }
      }
    }

    .row-right {
      display: flex;
      flex: 1;
      margin-left: fw(20vw, pc);
      flex-flow: column;
      margin-top: 0 !important;

      .hot-article {
        width: 100%;
        padding: fh(30vh, pc) fw(30vw, pc);
        background-color: $fh90;
        margin-top: 0;

        .article-label {
          color: $zh;
          position: relative;
          display: inline-block;
          font-size: fh(24vh, pc);
          font-weight: 800;
          margin-top: fh(20vh, pc);
          margin-bottom: fh(60vh, pc);

          &::after {
            content: "";
            position: absolute;
            bottom: fh(-16vh, pc);
            right: fw(-12vw, pc);
            width: fw(30vw, pc);
            height: fh(18vh, pc);
            border-right: fw(6vw, pc) solid hsla(14, 74%, 37%, 0.2);
            border-bottom: fw(8vw, pc) solid hsla(14, 74%, 37%, 0.2);
          }
        }

        .article-view {
          color: $sh;

          .article-item {
            width: fw(485vw, pc);
            line-height: fh(26vh, pc);
            margin-bottom: fh(26vh, pc);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            span {
              color: $zh;
              font-size: fh(18vh, pc);
              font-weight: bold;
              display: inline-block;
              padding-right: fw(16vw, pc);
            }

            &:hover {
              opacity: 0.8;
              cursor: pointer;
              color: $zh;
            }
          }
        }
      }
    }
  }

  .art-col {
    position: relative;
    width: fw(1180vw, pc);
    // background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), #f5f5f5);
    background-color: #f6f6f6;
    min-height: fh(1600vh, pc);

    .detail-title {
      padding: 0 fw(40vw, pc);
      margin: fh(50vh, pc) auto fh(40vh, pc) auto;
      text-align: center;
      font-size: fh(24vh, pc);
      font-weight: bold;
    }

    .detail-info {
      padding: fh(12vh, pc) fw(40vw, pc);
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      background: rgba(237, 241, 243, 0.8);
      color: #2e2e2e;

      .info-item {
        // max-width: 40%;
        span {
          padding-right: fw(0vw, pc);
        }
      }
    }

    .detail-html {
      padding: 0 fw(40vw, pc);
      padding-top: fh(48vh, pc);

      p img {
        width: 100%;
      }
    }
  }
}

#detail.h5 {
  .art-row {
    flex-wrap: wrap;

    .art-col {
      width: 100%;
      min-height: auto;

      .detail-title {
        margin: 18px 20px;
        padding: 0;
        line-height: 120%;
      }

      .detail-info {
        flex-wrap: wrap;
        padding-bottom: 0;
        align-items: left;

        div {
          width: 100%;
          text-align: left;
          font-size: fh(12vh, h5);
          line-height: fh(30vh, h5);
        }
      }

      .detail-html {
        padding-top: 0;

        ::v-deep p {
          font-size: 14px;
        }

        ::v-deep section {
          font-size: 14px;
        }
      }

      .go-top {
        position: fixed;
        bottom: 10%;
        right: 10%;
      }
    }

    .row-right {
      margin: 0;
      margin-top: 0;

      .hot-article .article-view .article-item {
        width: 90vw;
      }

      .book-content .book-row {
        align-items: center;

        img.book-img {
          width: 51%;
          height: auto;
        }

        .book-text {
          flex: 1;
          margin-left: fw(10vw, h5);
        }
      }

      .book-content .book-btn {
        img {
          width: 30%;
        }
      }
    }
  }
}
</style>
